<!DOCTYPE html>
<html>
  <head>
    <title>test.html</title>
	
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<link href="./jquery-ui.css" rel="stylesheet">
<script src="./jquery.js"></script>
	<script src="../js/bootstrap.min.js"></script>
	<script src="./jquery-ui.js"></script>

<script type="text/javascript">

$( function() {
    var dateFormat = "mm/dd/yy",
      from = $( "#from" )
        .datepicker({
          defaultDate: "+1w",
          changeMonth: true,
          numberOfMonths: 1
        })
        .on( "change", function() {
          to.datepicker( "option", "minDate", getDate( this ) );
          from.datepicker( "option", "dateFormat", "yy-mm-dd" );
          
        }),
      to = $( "#to" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 1
      })
      .on( "change", function() {
        from.datepicker( "option", "maxDate", getDate( this ) );
        to.datepicker( "option", "dateFormat", "yy-mm-dd" );
      });
 
    function getDate( element ) {
      var date;
      try {
        date = $.datepicker.parseDate( dateFormat, element.value );
      } catch( error ) {
        date = null;
      }
 
      return date;
    }
  } );

</script>
  </head>
  
  <body>
    This is my HTML page. <br>
   time:<label for="from">From</label>
   <form action="../user_bydate">
<input type="text" id="from" name="from" >
<label for="to">to</label>
<input type="text" id="to" name="to" >
<input type="submit"/>
    </form>
    
  </body>
</html>
